<template>
    <div class="home-vocation">
        <div class="vocation-title">
            周末去哪
        </div>
        <ul class="vocation-u">
            <li v-for="item in vocationList" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <div>
                    <p class="product-name">{{item.productName}}</p>
                    <p class="product-desc">{{item.productDesc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name : "home-vocation",
    data(){
        return {
            
        }
    },
    props : [
        "vocationList"
    ]    
}
</script>

<style scoped>

.home-vocation{ padding:0 0.2rem;}

.vocation-title{ font-size:0.3rem; padding:0.24rem 0rem;}

.vocation-u li{ margin-bottom:0.28rem;}

.vocation-u img{ width:100%}

.vocation-u .product-name{ color:#212121; line-height:2.2em; font-size:0.28rem;}

.vocation-u .product-desc{ color:#616161; font-size:0.24rem;}

</style>

